import React from 'react';
import { Card, Button, message, Tabs, Icon} from 'antd';
const TabPane = Tabs.TabPane; 

export default class ITabs extends React.Component{
  
    constructor(props) {
        super(props);
        this.newTabIndex = 0;
        const panes = [
          { title: 'Tab 1', content: 'Content of Tab Pane 1', key: '1' },
          { title: 'Tab 2', content: 'Content of Tab Pane 2', key: '2' },
        ];
        this.state = {
          activeKey: panes[0].key,
          panes,
        };
      }
    handleCallBack = (key) => {
        message.info('Hi,您选择了页签' + key)
    }
  
    onChange = activeKey => {
      this.setState({ activeKey });
    };
  
    onEdit = (targetKey, action) => {
      this[action](targetKey);
    };
  
    add = () => {
      const { panes } = this.state;
      const activeKey = `newTab${this.newTabIndex++}`;
      panes.push({ title: 'New Tab', content: 'New Tab Pane', key: activeKey });
      this.setState({ panes, activeKey });
    };
  
    remove = targetKey => {
      let { activeKey } = this.state;
      let lastIndex;
      this.state.panes.forEach((pane, i) => {
        if (pane.key === targetKey) {
          lastIndex = i - 1;
        }
      });
      const panes = this.state.panes.filter(pane => pane.key !== targetKey);
      if (panes.length && activeKey === targetKey) {
        if (lastIndex >= 0) {
          activeKey = panes[lastIndex].key;
        } else {
          activeKey = panes[0].key;
        }
      }
      this.setState({ panes, activeKey });
    };
    // componentWillMount() {
    //     const panes = [
    //         {
    //             title: 'Tab 1',
    //             contnet: 'Tab 1',
    //             key:'1'
    //         },
    //         {
    //             title: 'Tab 2',
    //             contnet: 'Tab 2',
    //             key:'2'
    //         },
    //         {
    //             title: 'Tab 3',
    //             contnet: 'Tab 3',
    //             key:'3'
    //         }
    //     ]
    //     this.setState({
    //         activeKey: panes[0].key,
    //         panes
    //     })
    // }
    render() {
        return (
            <div>
                <Card title="Tab页面" className="card-wrap">
                   <Tabs defaultActiveKey="1" onChange={this.handleCallBack}>
                        <TabPane tab="Tab 1" key="1">Content of 1</TabPane>
                        <TabPane tab="Tab 2" key="2">Content of 21</TabPane>
                        <TabPane tab="Tab 3" key="3">Content of 31</TabPane>
                   </Tabs>
                </Card>

                <Card title="Tab带图的标签" className="card-wrap">
                   <Tabs defaultActiveKey="1" onChange={this.handleCallBack}>
                        <TabPane tab={<span><Icon type="plus" />Tab 1</span>} key="1">Content of 1</TabPane>
                        <TabPane tab={<span><Icon type="edit" />Tab 1</span>}  key="2">Content of 21</TabPane>
                        <TabPane tab={<span><Icon type="delete" />Tab 1</span>} key="3">Content of 31</TabPane>
                   </Tabs>
                </Card>


                <Card title="Tab带图的标签" className="card-wrap">
                   <Tabs 
                   onChange={this.onChange}
                //    activeKey = {this.state.activeKey}
                   defaultActiveKey="1" 
                   type="editable-card"
                   onEdit = {this.onEdit}
                  
                   >
                       {
                           this.state.panes.map((panel)=> {
                               return <TabPane 
                               tab={panel.title}
                               key={panel.key}
                               >
                                   </TabPane>
                           })
                       }
                   </Tabs>
                </Card>
               <Card className="card-wrap" title="导航栏首选">
                  <Tabs  type="card" size="large">
                        <TabPane tab="景点回顾" key="1">
                            Content of Tab Pane 1
                        </TabPane>
                        <TabPane tab="咸鱼翻身" key="2">
                              Content of Tab Pane 2
                        </TabPane>
                        <TabPane tab="鲤鱼打挺" key="3">
                            Content of Tab Pane 3
                        </TabPane>
                        <TabPane tab="花拳绣腿" key="4">
                            Content of Tab Pane 1
                        </TabPane>
                        <TabPane tab="Tab 2" key="5">
                              Content of Tab Pane 2
                        </TabPane>
                        <TabPane tab="Tab 3" key="6">
                            Content of Tab Pane 3
                        </TabPane>
                  </Tabs>,
               </Card>

               <Card className="card-wrap">
                <Tabs type="card">
                  <TabPane tab="Tab Title 1" key="1">
                    <p>Content of Tab Pane 1</p>
                    <p>Content of Tab Pane 1</p>
                    <p>Content of Tab Pane 1</p>
                  </TabPane>
                  <TabPane tab="Tab Title 2" key="2">
                    <p>Content of Tab Pane 2</p>
                    <p>Content of Tab Pane 2</p>
                    <p>Content of Tab Pane 2</p>
                  </TabPane>
                  <TabPane tab="Tab Title 3" key="3">
                    <p>Content of Tab Pane 3</p>
                    <p>Content of Tab Pane 3</p>
                    <p>Content of Tab Pane 3</p>
                  </TabPane>
                </Tabs>
               </Card>
            </div>
        )
    }
}